<!--用做单个试题查看或者重做-->
<script setup>


import QuestionApis from "@/apis/question.js";
import {ElMessage} from "element-plus";
import useUserStore from '@/stores/user.js'
import {useRoute} from "vue-router";


const route=useRoute()
const userStore=useUserStore()
const props=defineProps({
  currentQuestion:{
    type: Object,
    required: true
  },
  recordsType:{
    type: String,
    required: true
  },
  // 这里栏目id应该是章节id等
  columnId:{
    type: String,
    required: true
  },
  chapterId:{
    type: String,
    required: true
  },
  showCollectBtn:{
    type: Boolean,
    required: false,
    default: true
  }
})
function currentAnalyseText(myCard) {
  switch (myCard.firstType) {
    case 1:
    case 5:
      return myCard.rightAnswer
    case 3:
      return myCard.rightAnswer == 0 ? '错' : '对'
    case 4:
      return myCard.rightAnswer.split(' ').map((e, i) => {
        return `${i + 1}.${e}`
      }).join('<br/>');

    case 2:
    case 7:
      return myCard.rightAnswer.join(' ')
    default:
  }
}
function toggleNote(){
  if (!props.currentQuestion.collect) {
    QuestionApis.collectQuestion({
      industryCode: userStore.selectCategory.industryCode,
      examId: userStore.selectCategory.examId,
      categoryId: userStore.selectCategory.categoryId,
      industryName: userStore.selectCategory.industryName,
      examName: userStore.selectCategory.examName,
      categoryName: userStore.selectCategory.categoryName,
      columnId: props.columnId,
      qid: props.currentQuestion.id,
      true: true,
      recordsType: props.recordsType,
      data: {
        qt: props.currentQuestion.firstType,

        // qt: firstTypeMap1[currentQuestion.value.firstType],
        tr: '',
        cid: props.currentQuestion.cid,
        ct: props.recordsType,
        cn: props.currentQuestion.cn,
        as: props.currentQuestion.answer,
        sn: props.currentQuestion.sign,
        t: new Date().getTime(),
        st: props.currentQuestion.stem
      }
    }).then(res => {
      if (res.data == true) {
        ElMessage({
          message: '收藏成功',
          type: 'success',
        })
        props.currentQuestion.collect = true
      }
      // QuestionApis.paperRecordsCollect(localStore.userSelectedIdsMap)
    })
  } else {
    QuestionApis.delCollect({
      industryCode: userStore.selectCategory.industryCode,
      examId: userStore.selectCategory.examId,
      categoryId: userStore.selectCategory.categoryId,
      industryName: userStore.selectCategory.industryName,
      examName: userStore.selectCategory.examName,
      categoryName: userStore.selectCategory.categoryName,
      columnId: route.query.columnId,
      qid: props.currentQuestion.id,
    }).then(res => {
      if (res.success == true) {
        ElMessage({
          message: '取消收藏成功',
          type: 'success',
        })
        props.currentQuestion.collect = false
        props.currentQuestion.notedTime = 0
      }
    })
  }
}

</script>

<template>
  <div class="one-question-container">
    <div class="topiccontentR h100h">
      <div class="tiListBox h100h">
        <div class="firstType">
        </div>
        <div class="questionList h100h">
          <div class="questionContent h100h flex" v-if="currentQuestion">
            <div class="questionBox h100s">
              <div>
                <div class="questionTitle">
                  <span v-html="currentQuestion.stem[0]['vl']"></span>
                </div>
                <div class="questionOptionMap">
                  <template v-if="currentQuestion['firstType'] == 1">
                    <el-radio-group class="my-radio-group"
                                    v-model="currentQuestion.answer"
                                   >
                      <el-radio v-for="(item, index) in currentQuestion['quOption']"
                                :key="index" :label="item.option" class="my-checkbox"
                                >
                        <div class="my-option">
                          <span class="icon">{{ item.option }}</span>
                          <span style="margin-left:20px"
                                v-html="item.content[0]['vl']">
                            </span>
                        </div>
                      </el-radio>
                    </el-radio-group>
                  </template>
                  <template
                      v-else-if="currentQuestion['firstType'] == 2 || currentQuestion['firstType'] == 7">

                    <el-checkbox-group v-model="currentQuestion.answer"
                                      >
                      <el-checkbox class="my-checkbox"
                                   v-for="(item, index) in currentQuestion['quOption']"
                                   :key="index" :label="item.option"
                                   >
                        <div class="my-option">
                                                                      <span class="icon"
                                                                            >{{
                                                                          item.option
                                                                        }}</span>
                          <span style="margin-left:20px"
                                v-html="item.content[0]['vl']">
                            </span>
                        </div>
                      </el-checkbox>
                    </el-checkbox-group>
                  </template>
                  <template v-else-if="currentQuestion['firstType'] == 3">
                    <el-radio-group class="my-radio-group"
                                    v-model="currentQuestion.answer"
                                    >
                      <el-radio v-for="(item, index) in currentQuestion['quOption']"
                                :key="index" :label="item.option" class="my-checkbox"
                                >
                        <div class="my-option">
                          <span class="icon">{{ item.option }}</span>
                          <span style="margin-left:20px">
                                                                          {{ item.option == 0 ? '错' : '对' }}
                                                                      </span>
                        </div>
                      </el-radio>
                    </el-radio-group>
                  </template>
                  <template v-else-if="currentQuestion['firstType'] == 4">
                    <el-input v-for="(item, index) in currentQuestion['quOption']"
                              v-model="currentQuestion['answer' + index]">
                    </el-input>
                  </template>
                  <template v-else-if="currentQuestion['firstType'] == 5">
                    <el-input class="textareaInput" type="textarea"
                              v-model="currentQuestion.answer"
                              placeholder="请输入答案"></el-input>
                  </template>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="jiexiqu h100h"
         v-if="currentQuestion">
      <div class="jiexiBox h100s">
        <template v-if="currentQuestion.firstType != 5">

          <div class="common_title">
            <div class="common_border"></div>
            <div class="common_title">参考答案:<span v-html="currentAnalyseText(currentQuestion)"></span></div>
          </div>

        </template>


        <div class="common_title">
          <div class="common_border"></div>
          <div class="common_title">解析:<span v-html="currentQuestion.answerDesc[0].vl"></span></div>
        </div>
      </div>
    </div>
    <div class="topicBottomWrap">
      <div class="topicBottom">
        <div class="right-btns" v-if="showCollectBtn">
          <el-button type="primary" v-if="currentQuestion && currentQuestion.collect" @click="toggleNote">
            取消收藏
          </el-button>
          <el-button type="primary" v-else-if="currentQuestion" @click="toggleNote">收藏本题</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.one-question-container{
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.jiexiBox.h100s{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>